<template>
	<view class="wrap">
		<view class="title">
			<u-icon name="info-circle" color="#2979ff" size="32" :custom-style="customStyle"></u-icon>
			<text class="prompt">信息仅用于用户认证，未经用户允许绝不对外提供</text>
		</view>
		<view class="information">
			<u-icon name="checkmark-circle" color="	#708090" size="32" :custom-style="customStyle"></u-icon>
			<text class="content">完成认证，获取Carry标识，即可在平台自由接单</text>
		</view>
		<view class="certification">
			<view class="content">
				<view class="display-area" @click="chooseImageUp">
					<view v-if="fontPhoto" bindtap="chooseImage" class="display-area">
						<image :src="fontPhoto" mode="aspectFit" class="img"></image>
					</view>
					<view v-else bindtap="chooseImage">
						<image class="img" src="../../../static/certification/fontface.jpg" mode="aspectFit"></image>
						<view class="title">点击添加学生证正面</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="display-area" @click="chooseImageDown">
					<view v-if="backPhoto" bindtap="chooseImage" class="display-area">
						<image class="img" :src="backPhoto" mode="aspectFit"></image>
					</view>
					<view v-else bindtap="chooseImage">
						<image class="img" src="../../../static/certification/backface.jpg" mode="aspectFit"></image>
						<view class="title">点击添加学生证反面</view>
					</view>
				</view>
			</view>
		</view>
		<view class="correct-box">
			<u-button class="correct-button" @click="onPublishTaskClick" type="primary" :custom-style="buttonStyle">确认提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					marginRight: '6px'
				},
				fontPhoto: '',
				backPhoto: '',
				buttonStyle: {
					position: 'fixed',
					bottom: 0,
					width: '100%',
					left: 0,
				},
				filesArr: []
			}
		},
		methods: {
			onPublishTaskClick() {
				uni.uploadFile({
					url: 'https:/bd.imsle.com/authentication/uploadAuth', //仅为示例，非真实的接口地址
					filePath: this.fontPhoto,
					name: 'frontPhoto',
					header:{
						Authorization: this.vuex_token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
						uni.uploadFile({
							url: 'https:/bd.imsle.com/authentication/uploadAuth', //仅为示例，非真实的接口地址
							filePath: this.backPhoto,
							name: 'backPhoto',
							header:{
								Authorization: this.vuex_token
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
					}
				});
				
			},
			chooseImageUp() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: res => {
						console.log(res.tempFilePaths[0]);
						this.fontPhoto = res.tempFilePaths[0];
					}
				});
			},
			chooseImageDown() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: res => {
						console.log(res.tempFilePaths[0]);
						this.backPhoto = res.tempFilePaths[0];
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.title {
		width: 100%;
		height: 40px;
		background: #ADD8E6;
		color: #0000FF;
		line-height: 40px;
		padding-left: 15px;
	}

	.information {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding-left: 15px;
		color: #708090;
	}

	.certification {
		width: 85%;
		height: 450px;
		background: #fff;
		border-radius: 8px;
		margin: 0 auto;
		box-shadow: 0 0 10px #87CEEB;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;

		.content {
			width: 75%;
			height: 30%;


			.display-area {
				display: flex;
				flex-direction: column;
				height: 100%;
				width: 100%;
				text-align: center;
				border-radius: 8px 8px;
				background: #fff;
				align-items: center;
				justify-content: center;

				.img {
					width: 255px;
					height: 135px;
				}

				.title {
					background: #fff;
					padding: .3rem .22rem .18rem .22rem;
					font-size: 15px;
					color: #666;
				}
			}
		}
	}
</style>
